//out :./top.css

.sun_top {
  /* display: flex;
  flex-direction: row; */
  height: 70px;
  width: 100%;
  background-color: #242424;
}

.sun_top .sun_logo {
  /* margin-left: 120px; */
  width: 180px;
  height: 70px;
  background-image: url(https://s2.music.126.net/style/web2/img/frame/topbar.png?63c5dad3572eca7b4e988c7dfabe69f9);
  background-position: 0px 0px;
}

.sun_top .sun_main {
  width: 1120px;
  display: flex;
  flex-flow: row wrap;
  margin: auto;
}

.sun_top ul.sun_work {
  cursor: pointer;
}

.sun_top ul.sun_work li {
  height: 70px;
  width: 75px;
  line-height: 70px;
  text-align: center;
}

.sun_top ul.sun_work li a {
  font-size: 14px;
  color: #cccccc;
  margin: auto;
}

.sun_top ul.sun_work li:hover {
  background-color: black;
  color: #fff;
}

.sun_top ul.sun_work li.fixed {
  background-color: black;
  color: #fff;
  margin-right: -5px;
  padding-right: 2px;
  padding-left: 3px;
}

.sun_top .sun_search {
  width: 200px;
  height: 30px;
  margin-top: 22px;
  margin-left: 15px;
  background-color: #fff;
  border-radius: 20px;
}

.sun_top .sun_search .sun_search_input {
  background-color: transparent;
  border: transparent;
  outline: none;
  height: 18px;
  width: 160px;
  margin: 7px 0px 5px 5px;
  font-size: 11px;
}

.sun_top a.sun_center {
  width: 70px;
  height: 20px;
  text-align: center;
}

.sun_top a.sun_center .creator_center {
  height: 30px;
  width: 85px;
  line-height: 30px;
  margin-top: 20px;
  margin-left: 10px;
  border: #4e4e4e 1px solid;
  border-radius: 20px;
  font-size: 13px;
  color: rgb(195, 189, 189);
}

.sun_top .sun_download {
  line-height: 70px;
  font-size: 13px;
  color: #787878;
  margin-left: 40px;
}

.sun_search {
  .sun_list {
    margin-top: 5px;
    width: 240px;
    // height: 280px;
    background-color: #fff;
    border-radius: 5px;

    .sun_related {
      width: 100%;
      height: 40px;
      font-size: 12px;
      color: #666;
      border-bottom: 1px solid #e2e2e2;
      // line-height: 40px;

      p {
        // display: flex;
        width: 120px;
        height: 15px;
        padding: 10px 0 0 10px;
        white-space: nowrap; //防止内容换行

        a {
          color: #666;

          span {
            max-width: 110px;
            display: inline-block;
            vertical-align: top;
          }

          &:hover {
            background-color: #e3e5e7;
          }
        }
      }
    }

    .sun_music {
      width: 100%;
      // height: 240px;
      border-radius: 0 0 5px 5px;

      .sun_item {
        width: 100%;
        // height: 60px;
        display: flex;
        flex-wrap: wrap;
        font-size: 12px;

        h3 {
          border-right: 1px solid #e2e2e2;
          padding-top: 8px;
          width: 60px;

          .iconfont {
            color: #666;
            padding-right: 3px;
          }
        }

        ul {
          width: 100%;
          // height: 30px;
          padding: 3px 0 0 0px;
          border-top: 1px solid #e2e2e2;
          flex: 1;
          overflow: hidden;

          li {
            padding-left: 10px;
            width: 100%;
            line-height: 24px;
            overflow: hidden;
            white-space: nowrap; //防止内容换行
            text-overflow: ellipsis; //显示省略号

            &:hover {
              background-color: #e3e5e7;
              cursor: pointer;
            }
          }
        }

        &:nth-child(2n) {
          ul {
            background-color: #f9f8f8;
            border-radius: 0 0 5px 0;
          }
        }
      }
    }

    .sun_none {
      border-radius: 0 0 5px 5px;
      width: 100%;
      height: 80px;
      font-size: 12px;
      color: #666;
      line-height: 20px;
      background-color: #fff;

      span {
        display: inline-block;
        padding: 10px 0 0 10px;
      }

      p {
        width: 200px;
        height: 80px;
        padding: 0px 0 0 10px;
        // white-space: nowrap; //防s止内容换行

        .content {
          max-width: 100px;
          vertical-align: top;
          padding: 0 0 0 0;
          // white-space: nowrap
        }
      }
    }

    .pick {
      display: block;
    }

    .unpick {
      display: none;
    }
  }

  .disappear {
    display: none;
  }

  .active {
    display: block;
  }
}